import { State } from "../core/state";

export class MainMenuState extends State{
  constructor(){
    super('MainMenuState')
  }

  getInnerHTML(){
    return `
      <div class="logo">
        <img src="res/ui/logo2.png" />
      </div>

      <div class="btn-group">
        <button class="styledButton white continueBtn">继续游戏</button>
        <button class="styledButton white newGameBtn">开始新游戏</button>
        <!--<button class="styledButton white">游玩记录</button>-->
      </div>

      <div class="footer">
        <div class="version">Version: ${G_BUILD_VERSION} @ ${G_APP_ENVIRONMENT === 'dev' ? '开发版本' : '正式版本'}</div>
      </div>

      <div class="iconControl">
        <button class="settingButton"><img src="res/ui/icons/setting.svg" /></button>
        <button class="changelogButton"><img src="res/ui/icons/changelog.svg" /></button>
      </div>
    `;
  }

  onEnter(){
    this.initButtonGroup();

    const qs = this.htmlElement.querySelector.bind(this.htmlElement);

    this.trackClicks(qs('.changelogButton'), this.moveToStateChangelog.bind(this));
    this.trackClicks(qs('.settingButton'), this.moveToStateSetting.bind(this));
  }

  initButtonGroup(){
    const playerData = this.app.savegame.getPlayerData();
    const continueBtn = this.htmlElement.querySelector('.continueBtn');
    const newGameBtn = this.htmlElement.querySelector('.newGameBtn');

    if(!playerData.troops.length){
      continueBtn.classList.add('remove');
    }

    this.trackClicks(continueBtn, this.onContinueClick.bind(this));
    this.trackClicks(newGameBtn, this.onNewGameClick.bind(this));
  }

  onContinueClick(){
    this.moveToState('GameState');
  }

  onNewGameClick(){
    this.moveToState('GameCreateState');
  }

  moveToStateChangelog(){
    this.moveToState('ChangelogState')
  }

  moveToStateSetting(){
    this.moveToState('SettingState')
  }

  moveToStateMapEditor(){
    this.moveToState('MapEditorState')
  }
}